<!--头部公共部分-->
{include file="common/header" /}
<!--suppress ALL -->
<script>
    var elimination_status = '{$elimination_status}';
    function  Hide(cell)
    {
        var obj  =  document.getElementById("showTb");
        for(i=0;i<obj.rows.length;i++)
        {
            obj.rows[i].cells[cell].style.display  =  "none";
        }
    }

    function  show(cell)
    {
        obj  =  document.getElementById("showTb");
        for(i=0;i<obj.rows.length;i++)
        {
            obj.rows[i].cells[cell].style.display  =  "block";
        }
    }
</script>
<body>
<div style="padding:15px;font-size: 14px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">班级名称:</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="" name="grades_name"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 570px;">
                <label class="layui-form-label">上课时间:</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="" name="class_time" autocomplete="off"
                           class="layui-input">

                </div>
            </div>


        </div>


        <div class="layui-form-item">


            <div class="layui-inline" >
                <label class="layui-form-label">上课内容:</label>
                <div class="layui-input-inline" style="width: 1080px">
                    <textarea type="text"  name="content_area" value="" autocomplete="off"
                           class="layui-input"></textarea>
                </div>
            </div>
        </div>

        <div class="layui-form-item">


            <div class="layui-inline" >
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-inline" style="width: 1080px">
                    <textarea type="text" name="remarks_area"  value="" autocomplete="off"
                              class="layui-input"></textarea>
                </div>
            </div>
        </div>





        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-warm" id="add_students">
                    <i class="layui-icon layui-icon-add-circle-fine"></i>添加学员</button>
            </div>
        </div>

        <div class="layui-form-item " id="div_elimination" style="margin-left: -10px">
            <div class="layui-inline" >

                <script>
                    if(elimination_status == 0){
                        document.write(' <input  type="checkbox"  lay-filter="elimination" value="0" name="elimination" title="动态课消?">');
                    }else if(elimination_status == 1){
                        document.write(' <input  type="checkbox"  lay-filter="elimination" value="1" name="elimination" title="动态课消?" checked>');
                    }
                </script>




            </div>
        </div>

        <div class="layui-form-item" >
            <table class="layui-table" style="width: 1210px;" id="showTb">
                <thead>
                <tr>
                    <th style="text-align: center;">姓名</th>
                    <th style="text-align: center;">联系电话</th>
                    <th style="text-align: center;">缺勤原因</th>
                    <th style="text-align: center;">---</th>
                    <th style="text-align: center; width: 150px; ">备注</th>
                    <th style="text-align: center;">---</th>
                    <th style="text-align: center;">---</th>
                    <th style="text-align: center; width: 80px; ">剩余课时</th>
                    <th style="text-align: center;"><a id="empty"><i class="layui-icon layui-icon-delete"></i></a></th>
                </tr>
                </thead>
                <tbody id="xq">
                <script>

                    var jsondata = eval('{$jsondata}');
                    var id = '{$id}';
                    var attendance_nums = 0; //出勤人数
                    var charging_nums = 0; //计费人数
                    console.log("jsondata:"+jsondata.length)
                    console.log(jsondata)
                    for(var i =0; i < jsondata.length; i ++){
                        document.write('<tr>');
                        document.write('<td style="text-align: center;">'+jsondata[i].student_name+'</td>');
                        document.write('<td style="text-align: center;">'+jsondata[i].phone+'</td>');

                        if(jsondata[i].attendance_reasons == '事假'){
                            document.write('<td style="text-align: center; width: 100px"> <select name="reasons" lay-filter="reasons_select" id="reasons_id" > <option value=""></option> <option value="事假" selected>事假</option> <option value="病假">病假</option> <option value="旷课">旷课</option> <option value="迟到">迟到</option> </select> </td>');
                        }else if(jsondata[i].attendance_reasons == '病假'){
                            document.write('<td style="text-align: center; width: 100px"> <select name="reasons" lay-filter="reasons_select" id="reasons_id" > <option value=""></option> <option value="事假">事假</option> <option value="病假" selected>病假</option> <option value="旷课">旷课</option> <option value="迟到">迟到</option> </select> </td>');
                        }else if(jsondata[i].attendance_reasons == '旷课'){
                            document.write('<td style="text-align: center; width: 100px"> <select name="reasons" lay-filter="reasons_select" id="reasons_id" > <option value=""></option> <option value="事假">事假</option> <option value="病假">病假</option> <option value="旷课" selected>旷课</option> <option value="迟到">迟到</option> </select> </td>');
                        }else if(jsondata[i].attendance_reasons == '迟到'){
                            document.write('<td style="text-align: center; width: 100px"> <select name="reasons" lay-filter="reasons_select" id="reasons_id" > <option value=""></option> <option value="事假">事假</option> <option value="病假">病假</option> <option value="旷课">旷课</option> <option value="迟到" selected>迟到</option> </select> </td>');
                        }else{
                            document.write('<td style="text-align: center; width: 100px"> <select name="reasons" lay-filter="reasons_select" id="reasons_id" > <option value=""></option> <option value="事假">事假</option> <option value="病假">病假</option> <option value="旷课">旷课</option> <option value="迟到">迟到</option> </select> </td>');
                        }

                        document.write('<td style="text-align: center;"><span class="layui-form-label">计费次数</span><input type="number" min="0" name="elimination_item" style="width:60px;" autocomplete="off" value="'+jsondata[i].eliminated_nums+'" class="layui-input"></td>');
                        document.write('<td style="text-align: center;"><input type="text"  id="remarks" name="remarks" placeholder="备注:"  value="'+jsondata[i].remarks+'" autocomplete="off" class="layui-input"></td>');

                        if(jsondata[i].attendance == 1){
                            attendance_nums ++;
                            document.write('<td style="text-align: center;"><input type="checkbox" lay-filter="attendance_item" title="出勤" name="attendance_item" lay-skin="primary"  checked></td>');
                        }else{
                            document.write('<td style="text-align: center;"><input type="checkbox" lay-filter="attendance_item" title="出勤" name="attendance_item" lay-skin="primary" ></td>');
                        }

                        if(jsondata[i].charging == 1){
                            charging_nums ++ ;
                            document.write('<td style="text-align: center;"><input type="checkbox" lay-filter="charging_item" title="计费"  name="charging_item" lay-skin="primary" checked></td>');
                        }else{
                            document.write('<td style="text-align: center;"><input type="checkbox" lay-filter="charging_item" title="计费"  name="charging_item" lay-skin="primary" ></td>');
                        }
                        document.write('<td style="text-align: center;"><font color="#FF0000">'+jsondata[i].surplus_class_elimination+ '(赠送' + jsondata[i].surplus_class_elimination_give + ')' + '</font></td>');
                        document.write('<td style="text-align: center;" onclick="classForm_remove(this)"><input type="hidden" name="pos" value='+ jsondata[i].id +'><a id="empty" style="cursor: pointer" title="清空"><i class="layui-icon layui-icon-delete"></i></a></td>');
                        document.write('</tr>');
                    }


                    /***考勤人数等状态信息**/
                    document.write('<tr>');
                    document.write('<td style="text-align: center;"><span style="color: #00b7ee">共:'+jsondata.length+'(人)</span></td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="width: 100px; text-align: center;">---</td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="text-align: center;"><span style="color: #00b7ee">出勤:'+attendance_nums+'(人)</span></td>');
                    document.write('<td style="text-align: center;"><span style="color: #00b7ee">计费:'+charging_nums+'(人)</span></td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="text-align: center;"onclick="classForm_all(this)"><input type="hidden" name="pos" value='+ id +'><a id="empty" style="cursor: pointer" title="清空全部"><i class="layui-icon layui-icon-delete"></i></a></td>');
                    document.write('</tr>');


                    if(elimination_status == 0){
                        Hide(3);  //隐藏第3列,课消记录
                       }



                </script>
                </tbody>
            </table>
        </div>
        <div class="layui-form-item"  style="text-align: center">

                <a class="layui-btn layui-btn-normal" lay-submit lay-filter="sure">确定</a>
                <a class="layui-btn  layui-btn-primary" lay-submit lay-filter="cancel">取消</a>

        </div>
    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>

    //改变剩余课消数量
    function on_Change(obj) {
        var value_num = $(obj).find("input[name='elimination_item']").val();
        var inputs_charging = document.getElementsByName("charging_item");  //计费
        var elimination_items =  document.getElementsByName("elimination_item");
        var obj_box  =  document.getElementById("showTb"); //获取表格的对象
        for(var i =0; i < elimination_items.length; i ++){
            console.log(elimination_items[i].value)
            if(inputs_charging[i].checked){
                obj_box.rows[i+1].cells[7].innerHTML = '<font color="#FF0000">'+((jsondata[i].surplus_class_elimination + jsondata[i].eliminated_nums) - elimination_items[i].value)+'</font>';
            }

        }

    }

    //清除当前点击的tr
    function classForm_remove(obj)
    {
        var id = $(obj).find("input[name='pos']").val();
        var field = {};
        field.content_area = $('textarea[name=content_area]').val();
        field.remarks_area = $('textarea[name=remarks_area]').val();
        field.id = id;
        $.ajax({
            url: '/admin/arranging/modify_remove_item',
            method: "post",
            data: field,
            beforeSend: function () {
                isLoad = layer.load(0, {
                    shade: false
                }); //0代表加载的风格，支持0-2
            },
            success: function (result) {
                layer.msg(result.msg);
                if (result.code === 1) {
                    location.reload();
                }

            },
            complete: function () {
                layer.close(isLoad)
            },
            error: function (error) {
                console.log(error)
            }
        });
        $(obj).closest("tr").remove();
    }



    //清除所有的tr
    function classForm_all(obj)
    {
        var ids = '';
        for (var a = 0; a< jsondata.length; a++){
            ids = ids + jsondata[a].id + ',';
        }
        ids = ids.substr(0,ids.length-1);
        var field = {};
        field.content_area = $('textarea[name=content_area]').val();
        field.remarks_area = $('textarea[name=remarks_area]').val();
        field.ids = ids;
        $.ajax({
            url: '/admin/arranging/modify_remove_all',
            method: "post",
            data: field,
            beforeSend: function () {
                isLoad = layer.load(0, {
                    shade: false
                }); //0代表加载的风格，支持0-2
            },
            success: function (result) {
                layer.msg(result.msg);
                if (result.code === 1) {
                    location.reload();
                }

            },
            complete: function () {
                layer.close(isLoad)
            },
            error: function (error) {
                console.log(error)
            }
        });
        $(obj).closest("tr").remove();
    }


    layui.use(['table','element', 'layedit', 'jquery', 'form', 'laydate', 'layer'], function () {
        let $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            element = layui.element,
            laydate = layui.laydate,
            jquery = layui.jquery;

        var campus_id = '{$campus_id}';
        var content_area = '{$content_area}'; //上课内容
        var remarks_area = '{$remarks_area}'; //上课备注
        $('textarea[name=content_area]').val(content_area);
        $('textarea[name=remarks_area]').val(remarks_area);


        //添加学员
        $('#add_students').click(function () {
            var info_id = '{$id}';
            layer.open({
                skin: 'layui-layer-lan',
                type: 2,
                closeBtn: 2,
                title: '选择学员',
                area: ['95%', '95%'],
                shadeClose: false,
                content: "{:url('Arranging/add_students')}?info_id="+info_id + "&status=" + false + '&campus_id='+ campus_id,
                end: function(){
                    location.reload();
                }

            });
            return false;
        });


        //监听提交
        form.on('submit(sure)', function (data) {

            var inputs = document.getElementsByName("attendance_item");  //出勤
            var inputs_charging = document.getElementsByName("charging_item");  //计费
            var remarks = document.getElementsByName("remarks");  //备注
            var reasons = document.getElementsByName("reasons");  //原因
            var remarks_area = $('textarea[name=remarks_area]').val();//课节备注
            var content_area = $('textarea[name=content_area]').val();//课节内容
            var elimination_status = document.getElementsByName("elimination");  //是否选中动态课消
            var elimination_item = document.getElementsByName("elimination_item");  //是否选中动态课消
            var arr_json = [];

            for(var i=0;i<inputs.length;i++){
                if(!inputs[i].checked && !inputs_charging[i].checked && reasons[i].value.length <= 0){

                    layer.msg('请选择学员的出勤、计费等状态');
                    return false;
                }
            }


            for(var i=0;i<inputs.length;i++){
                var row = {};
                row.student_id = jsondata[i].student_id;
                row.id = jsondata[i].id;
                row.student_type = jsondata[i].student_type;
                if(inputs[i].checked){
                    row.attendance = 1; //已考勤
                }else{
                    row.attendance = 0; //未考勤

                    if(reasons[i].value.length <= 0){
                        layer.msg('请填写缺勤原因');
                        return;
                    }

                }


                if(inputs_charging[i].checked){
                    row.charging = 1; //已计费
                }else{
                    row.charging = 0; //未计费
                }


                //动态课消是否开启
                if(elimination_status[0].value == 1){
                    row.eliminated_nums = elimination_item[i].value;//课消节数，默认为1;动态课消则可自由调整
                }else if(elimination_status[0].value == 0){
                    row.eliminated_nums = 1;//课消节数，默认为1;动态课消则可自由调整
                }


                row.remarks = remarks[i].value;  //备注
                row.attendance_reasons = reasons[i].value; //原因
                row.remarks_area = remarks_area;//课节备注
                row.content_area = content_area;//课节内容
                arr_json.push(row);
            }

            if(arr_json.length <= 0){
                layer.msg('无学员信息');
                return;
            }
            var field = {};
            field.arr_json = JSON.stringify(arr_json);
            field.id = id;
            $.ajax({
                url: '/admin/arranging/modify_submission',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        var field = {};
                        field.id = id;
                        $.ajax({
                            url: '/admin/arranging/close',
                            method: "post",
                            data: field,
                            beforeSend: function () {
                                isLoad = layer.load(0, {
                                    shade: false
                                }); //0代表加载的风格，支持0-2
                            },
                            success: function (result) {
                                layer.msg(result.msg);
                                if (result.code === 1) {
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                }

                            },
                            complete: function () {
                                layer.close(isLoad)
                            },
                            error: function (error) {
                                console.log(error)
                            }
                        });
                        return false;


                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });


            return false;

        });


        //监听取消
        form.on('submit(cancel)', function (data) {
            var field = {};
            field.id = id;
            $.ajax({
                url: '/admin/arranging/close',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
            return false;
        });

        /***课消**/
        form.on('checkbox(elimination)',function (obj) {

            if(obj.elem.checked){
                show(3);
                $("input[name='elimination']:checked").val(1);  //设置value
                layer.msg('开启动态课消');
            }else{
                Hide(3);
                $("input[name='elimination']").val(0);
                layer.msg('关闭动态课消');
            }


        });

        /**计费全选*/
        form.on('checkbox(charging)', function(obj){

        });



        /**单个考勤*/
        form.on('checkbox(attendance_item)', function(obj){

        });


        /**单个计费*/
        form.on('checkbox(charging_item)', function(obj){

        });


    });


</script>
